<template>
  <!-- 公租房详情 -->
  <div class="rental-content">
    <div class="rental-img">
      <swiper :list="coverImg" dots-position="center" height="280px" auto :show-desc-mask="false"></swiper>
    </div>
    <div class="rental-infos">
      <div class="rental-item lighheight18 rental-border">
        <p class="m-name">{{houseDetail.quart}}</p>
        <p class="m-describe">参考租金：<span class="color-red">￥{{houseDetail.rental}}</span><span class="color-gray">元/㎡/月</span></p>
        <p class="m-describe">申请时间：<span class="color-gray">{{houseDetail.applyTime}}</span></p>
        <!-- <div class="detail-btns">
          <div class="detail-btn attention-btn">
            已关注
            <i class="click-extend" @click="cancelConcern" v-if="isAttention">
              <img src="../../images/rent/detail_ygz.png">
            </i>
            未关注
            <i class="click-extend" @click="concern" v-else>
              <img src="../../images/rent/detail_wgz.png">
            </i>
          </div>
        </div> -->
      </div>
      <div class="rental-item rental-border m-rental-type">
        <p>户型：<span class="rental-item-span">{{houseDetail.flattype}}</span></p>
        <p>类型：<span class="rental-item-span">{{houseDetail.type}}</span> </p>
        <p class="f-mt5">可租套数：<span class="rental-item-span">{{houseDetail.rentableNumber}}</span> </p>
        <p class="f-mt5">车位数：<span class="rental-item-span">{{houseDetail.carportNumber}}</span></p>
      </div>
      <div class="rental-item rental-border">
        <p class="m-title">配套情况：</p>
        <p>{{houseDetail.facility}}</p>
      </div>
      <div class="rental-item">
        <p class="m-title">项目介绍：</p>
        <p class="m-content">{{houseDetail.projectIntroduction}}</p>
      </div>
      <div class="verify-btn">
        <x-button class="btn" type="primary" @click.native="applyNow">立即申请</x-button>
      </div>
    </div>
    <div class="rental-look" v-if="houseDetail.vrUrl" @click="lookVr(houseDetail.vrUrl)">
      <img src="../../images/look.png" alt="">
    </div>
  </div>
</template>

<script>
import { Swiper } from 'vux'
export default {
  data () {
    return {
      houseDetail: '', // 公租房详情
      id: this.$route.query.id,
      coverImg: [],
      houseId: '', // 房源id
      isAttention: false // 是否关注
    }
  },
  components: {
    Swiper
  },
  created () {
    this.getInit()
  },
  methods: {
    // 关注房源
    concern () {
      if (this.currentUserId) {
        this.$axiosPosting(this.$api.concernHouse, {houseId: this.houseId}).then(res => {
          if (res.code === '0000') {
            this.$vux.toast.text('关注成功')
            this.isAttention = true
          } else {
            this.$vux.toast.text(res.msg)
          }
        })
      } else {
        this.$router.push('/login')
      }
    },
    // 取消关注房源
    cancelConcern () {
      if (this.currentUserId) {
        this.$axiosPosting(this.$api.cancleConcernHouse, {houseId: this.houseId}).then(res => {
          if (res.code === '0000') {
            this.$vux.toast.text('已取消关注')
            this.isAttention = false
          } else {
            this.$vux.toast.text(res.msg)
          }
        })
      } else {
        this.$router.push('/login')
      }
    },
    getInit (id) {
      this.$axiosPosting(this.$api.getHousePublicNewInfoByid, {id: this.$route.query.id}).then(res => {
        if (res.code === '0000') {
          this.houseId = res.data.housePublicDetail.rentableNumber // 房源Id
          this.houseDetail = res.data.housePublicDetail
          console.log(res.data.housePublicDetail.images.split(','))
          res.data.housePublicDetail.images.split(',').map(item => {
            console.log(item)
            this.coverImg.push({img: item + '?imageView2/1/w/750'})
          })
          console.log('详情数据', this.coverImg)
        }
      })
    },
    applyNow () {
      window.location.href = 'http://www.szjs.gov.cn/bsfw/zdyw_1/gzf/'
    },
    lookVr (uri) {
      window.location.href = uri
    }
  }
}
</script>

<style lang="less" scoped>
  .rental-content{
    font-size: 12px;
    height: 100vh;
    overflow: auto;
    color:#777;
    line-height: 2;
    position: relative;
    background: #fff;
    -webkit-overflow-scrolling: touch;
    .rental-look{
      position: absolute;
      top:215px;
      right:15px;
      // background:white;
      opacity: .7;
      width:50px;
      height:50px;
      border-radius: 50%;
      img{
        width:100%;
        height:100%;
        object-fit: cover;
      }
    }
    .rental-img{
      width: 100%;
      height: 280px;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover
      }
    }
    .rental-infos{
      .lighheight18{
        line-height: 1.7;
      }
      .verify-btn{
        padding: 0 15px 34px;
      }
      .rental-item{
        padding: 25px 15px;
        position: relative;
        .m-name{
          font-size: 20px;
          line-height: 20px;
          color:#000;
          margin-bottom: 5px;
          font-weight: bold;
        }
        .m-describe {
          font-size: 15px;
          color:#000;
        }
        .m-title{
          padding-left: 12px;
          margin-left: -15px;
          line-height: 1.25;
          font-size: 19px;
          margin-bottom: 12px;
          color: #000;
          border-left: 3px solid #ff9600;
        }
        .color-red {
          margin-right: 8px;
          color:#ff3c00;
          font-size: 23px;
          font-weight: bold;
        }
        .color-gray {
          color: #777;
        }
        .f-mt5 {
          margin-top: 5px;
        }
        .m-content{
          text-align: justify;
        }
        .rental-item-span{
          color: #000;
        }
      }
      .m-rental-type{
        display: flex;
        flex-wrap: wrap;
        font-size: 14px;
        p{
          width:50%;
        }
      }
      .rental-border{
        border-bottom:1px solid #f4f4f4;
      }
    }
  .detail-btns{
    position: absolute;
    top: 25px;
    right: 15px;
    .detail-btn{
      // margin-left: 18px; /* 36/40 */
      i{
        display: inline-block;
        width: 20px;
        height: 20px;
      }
      img{
        width: 18px; /* 36/40 */
        vertical-align: initial;
      }
    }
    .attention-btn img{
      width: 20px;
    }
  }
  }
</style>

